<template>
	<view>
		<view>
			<view class="indexBj top"></view>
			<carousel :img-list="bannerList" url-key="img" @selected="selectedBanner" />
		</view>

		<!-- 轮播图 -->
		<!-- <view class="swiperBox">
			<swiper class="swiper" indicator-active-color="#66D887" indicator-color="#ffffff" circular="true" indicator-dots="true" autoplay="true" interval="5000" duration="1000">
				<swiper-item v-for="(sp,spIndex) in bannerList" :key="spIndex">
					<view class="swiper-item"><image :src="sp.adFile" mode="" @tap="toBanner(sp)" ></image></view>
				</swiper-item>
			</swiper>
		</view> -->

		<!-- 热门活动 -->
		<!-- 		<view class="acvity">
			<view class="av_title_box" @tap="toMore(1)">
				<view class="av_title">
					<view class="main-title">热门活动<text class="line"></text></view><text class="xie">/</text>各色相亲活动，打造一流服务
				</view>
				<i class="iconfont iconicon_gengduo icon" style="font-size: 24rpx;color: #999999;"></i>
			</view>

			<scroll-view scroll-x="true" class="scroll" show-scrollbar="false">
				<view class="scroll_items" v-for="(acItem,acIndex) in acviteList" :key="acIndex" @tap="doSign(acItem)">
					<view class="scroll_img">
						<image :src="url+acItem.image" mode=""></image>
					</view>
					<view class="scroll_title">{{ acItem.title }}</view>
					<view class="scroll_nums"><i class="iconfont iconicon_chengyuan icons" style="color: #0091FF;"></i>{{ acItem.hasMan+acItem.hasWoman }}/{{ acItem.man+acItem.woman }}</view>
					<view class="scroll_times"><i class="iconfont iconicon_riqi icons" style="color: #0091FF;"></i>{{ doreset(acItem.endtime) }}</view>
					<view class="scroll_btn">我要报名</view>
				</view>
			</scroll-view>
		</view>
 -->


		<!-- 认证会员 -->
		<view class="verified">
			<view class="vf-title-box" @tap="toMore(2)">
				<view class="vf-title">
					<view class="main-title">精选会员<text class="line"></text></view><text class="xie">/</text>颜值都很高，就等你来挑
				</view>
				<i class="iconfont iconicon_gengduo icon" style="font-size: 24rpx;color: #999999;"></i>
			</view>

			<!-- 			<view class="verified-top" @tap='change'>
				<view class="top-item">
					<view>性别<span :class="{'verified-right':maskShow}" class="down"></span></view>
				</view>
				<view class="top-item">
					<view>年龄<span :class="{'verified-right':maskShow}" class="down"></span></view>
				</view>
				<view class="top-item">
					<view>地区<span :class="{'verified-right':maskShow}" class="down"></span></view>
				</view>
				<view class="top-item">
					<view>收入<span :class="{'verified-right':maskShow}" class="down"></span></view>
				</view>
			</view>
 -->
			<view class="verified-imgs">
				<view class="img-items" v-for="(vfitem,vfindex) in verifiedList" :key="vfindex">
					<view class="img-items-box" @tap="toPersonal(vfitem)">
						<image :src="vfitem.avatar.length > 10?vfitem.avatar:'https://thirdwx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTKUBoWkhq5D99oA5cThicxm9jyFL2mb0X6u9DGWHCkYHCF9icd0I4N5gPMBr3m5ic5GHZvSLc66cvZhQ/132'"
						 mode=""></image>
						<view class="verified-title">
							<text style="white-space:nowrap; overflow:hidden; text-overflow:ellipsis;">{{ vfitem.nickname }}</text>
							<i class="iconfont iconqiangtiao1" v-if="vfitem.gender==1" style="margin-left: 20rpx;color: #0091FF;"></i>
							<i class="iconfont iconicon_nv" v-if="vfitem.gender==2" style="margin-left: 20rpx;color: #FF77A1;"></i>
						</view>
						<!-- <view class="verified-cate">{{ vfitem.age?vfitem.age:'-' }}<text>|</text>{{ vfitem.industry?vfitem.industry:'-' }}<text>|</text>{{ vfitem.habitation?vfitem.habitation:'-' }}</view> -->
						<view class="verified-cate" v-if="vfitem.age || vfitem.industry || vfitem.habitation">{{ vfitem.age?vfitem.age+'岁':'' }}<text
							 v-if="vfitem.height">|</text>{{ vfitem.height?vfitem.height+'cm':'' }}<text v-if="vfitem.heightdata">|</text>{{ vfitem.habitation?vfitem.habitation:'' }}</view>
						
						<view class="verified-cate" v-else></view>
						<view class="shiming" v-if="vfitem.materialstatus==1">
							<image src="https://friend.tanshishang.cn/assets/img/shiming.png" mode=""></image>
						</view>
					</view>
				</view>
			</view>

		</view>

		<!-- 约会圈子 -->
		<!-- 		<view class="appointment">
			<view class="ap-title-box" @tap="toMore(3)">
				<view class="ap-title">
					<view class="main-title">约会圈子<text class="line"></text></view><text class="xie">/</text>一起来约会吧！
				</view>
				<i class="iconfont iconicon_gengduo icon" style="font-size: 24rpx;color: #999999;"></i>
			</view>
			<view class="items" v-for="(item,index) in appointList" :key="index" @tap="toDetail(item)">
				<view class="avatar">
					<view class="avatar-img">
						<image :src="item.avatar" mode=""></image>
					</view>
					<view></view>
				</view>
				<view class="info">
					<view class="info-title">{{ item.title }}</view>
					<view class="info-content">
						<view class="info-content-left">
							<i class="iconfont iconicon_dingwei icons" style="color: #0091FF;"></i>
							<text>{{ doStr(item.place) }}</text>
						</view>
						<view class="info-content-right">
							<i style="margin-left: 10rpx;color: #0091FF;" class="iconfont iconicon_riqi icons"></i>
							<text>{{ item.engagementtime }}</text>
						</view>
					</view>
					<view class="num">
						报名情况:
						<view>男<text>{{ item.addman }}</text>/{{ item.man }}</view>
						<view>女<text>{{ item.addwoman }}</text>/{{ item.woman }}</view>
					</view>
				</view>
				<view class="status" style="background-color: #FE4392;color: #FFFFFF;" v-if="item.statusStr==0">未开始</view>
				<view class="status" style="background-color: #0091FF;color: #FFFFFF;" v-if="item.statusStr==1">进行中</view>
				<view class="status" style="background-color: #D8D8D8;color: #999999;" v-if="item.statusStr==2">已结束</view>
				<view class="status" style="background-color: #D8D8D8;color: #999999;" v-if="item.activestatus==1">已结束</view>
			</view>

		</view>
		
		 -->
		<!-- 返回顶部 -->
		<view class="back" v-if="goBack" @tap="toTop()">
			<image src="/static/images/index/back.png" mode=""></image>
		</view>

		<!-- 遮盖层 -->
		<view :class="[serviseShow?'maskActive':'maskActiver']" class="mask" v-if="maskShow" @tap="close">
			<scroll-view class="mask-box" scroll-y="true" @tap.stop>
				<!-- 占位符 -->
				<view class="place"></view>
				<!-- 性别 -->
				<view class="gender">
					<view class="gender-title">性别</view>
					<view class="gender-box">
						<view :class="{'gender-activer':genderItem.selected}" class="gender-item" v-for="(genderItem,genderIndex) in search.genderArr"
						 :key="genderIndex" @tap="chooseGender(genderIndex)">
							<text>{{ genderItem.gender}}</text>
						</view>
					</view>
				</view>
				<!-- 年龄 -->
				<view class="age">
					<view class="age-title">年龄</view>
					<view class="age-box">
						<view :class="{'age-activer':ageItem.selected}" class="age-item" v-for="(ageItem,ageIndex) in search.ageArr" :key="ageIndex"
						 @tap="chooseAge(ageIndex)">
							<text>{{ ageItem.age}}</text>
						</view>
					</view>
				</view>
				<!-- 地区 -->
				<view class="area">
					<view class="area-title">地区</view>
					<view class="area-box">
						<view :class="{'area-activer':areaItem.selected}" class="area-item" v-for="(areaItem,areaIndex) in search.areaArr"
						 :key="areaIndex" @tap="chooseArea(areaIndex)">
							<text>{{ areaItem.area }}</text>
						</view>
					</view>
				</view>
				<!-- 收入 -->
				<view class="income">
					<view class="income-title">收入</view>
					<view class="income-box">
						<view :class="{'income-activer':incomeItem.selected}" class="income-item" v-for="(incomeItem,incomeIndex) in search.incomeArr"
						 :key="incomeIndex" @tap="chooseIn(incomeIndex)">
							<text>{{ incomeItem.income }}</text>
						</view>
					</view>
				</view>
				<!-- 确定按钮 -->
				<view class="btn">
					<text class="reset" @tap="reset">重置</text>
					<text class="btn-con" @tap="doResult">确定</text>
				</view>
			</scroll-view>
		</view>

	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import carousel from '@/components/vear-carousel/vear-carousel'
	export default {
		components: {
			carousel
		},
		data() {
			return {
				// bannerImg:"https://friend.tanshishang.cn/assets/img/friend.jpg",
				url: '',
				//预留轮播图
				bannerList: [],
				//活动
				acviteList: [],
				//认证会员
				verifiedList: [],
				//约会圈子
				appointList: [],
				maskShow: false,
				serviseShow: false,
				searchInfo: {
					gender: '',
					age: '',
					area: '',
					income: ''
				},
				search: {
					genderArr: [],
					ageArr: [],
					areaArr: [],
					incomeArr: [],
				},
				allList: [],
				//返回顶部
				goBack: false,
				time: '',
				menuButtonInfo: {}
			}
		},
		computed: {
			...mapState(['token', 'userId'])
		},
		//下拉刷新
		onPullDownRefresh() {
			console.log('下拉刷新');
			setTimeout(() => {
				uni.stopPullDownRefresh();
				this.getData();
			}, 1000)
		},
		//监听页面滚动
		onPageScroll(e) {
			// console.log(e);
			if (e.scrollTop >= 500) {
				//显示返回顶部按钮
				this.goBack = true;
			} else {
				this.goBack = false;
			}
		},
		//上拉加载
		onReachBottom() {
			console.log('触发上拉加载');
		},
		onLoad(data) {
			//获取当前时间戳
			this.time = new Date().getTime();
			this.url = this.$config.API;
			this.getBanner();

			//获取数组数据
			// this.getArr();

			//小程序右上胶囊
			// this.menuButtonInfo = uni.getMenuButtonBoundingClientRect();
			// console.log(this.menuButtonInfo);

		},
		onShow() {
			console.log('token:' + this.token);
			console.log('userId:' + this.userId);

			//获取数据
			this.getData();

			//获取消息数量
			// this.getMsg();


		},
		//分享给个人
		onShareAppMessage() {
			return {
				title: '青年交友',
				imageUrl: 'https://friend.tanshishang.cn/assets/img/shareImg.png',
				path: '/pages/index/index'
			}
		},
		//分享到朋友圈
		onShareTimeline() {
			return {
				title: '青年交友',
				path: '/pages/index/index'
			}
		},
		onHide() {
			this.maskShow ? this.maskShow = false : '';
		},
		methods: {
			getBanner() {
				this.$request.request.get('/api/index/ads').then((res) => {
					if (res.data.data) {
						let list = res.data.data
						for (let i in list) {
							let item = {
								img: this.$g.baseUrl + list[i].adimage
							}
							this.bannerList.push(item)
						}
					}
				});
			},
			//获取消息数
			async getMsg() {
				// let token = uni.getStorageSync('token');
				// let userId = uni.getStorageSync('userId');
				// console.log(token);
				if (this.token) {
					try {
						let params = {
							token: this.token,
							userId: this.userId
						}
						let res = await this.$request.request.get('/api/user/noRead', params);
						console.log(res.data);
						this.$common.setCartBadge(res.data.count);
					} catch (err) {
						this.$request.error(err, this)
					}
				}

			},
			toPublic() {
				// if (!this.token) {
				// 	uni.showModal({
				// 		title: '您还未登录',
				// 		content: '点击登录,登录后可查看更多!',
				// 		showCancel: true,
				// 		confirmText: '登录',
				// 		success: (res) => {
				// 			// console.log(res);
				// 			if (res.confirm) {
				// 				uni.navigateTo({
				// 					url: "/pages/index/wxLogin"
				// 				})
				// 			} else if (res.cancel) {
				// 				console.log('用户点击取消');
				// 			}

				// 		}
				// 	});
				// 	return false;
				// }
				// uni.navigateTo({
				// 	url:'chooseGender'
				// })
			},
			//获取全部数组
			async getArr() {
				try {
					let res = await this.$request.request.get('/api/other/getAera');
					// console.log(res.data);
					this.allList = { ...res.data
					};
					this.init();
				} catch (err) {
					this.$request.error(err, this)
				}
			},
			//获取数据
			async getData() {
				try {
					let params = {
						token: this.token,
						page: 1,
						limit: 30,
					};
					let res = await this.$request.request.get('/api/index/index', params)
					console.log(11111111,res);
					if (res.code == 200) {
						this.acviteList = res.data.info;
						for (let i in this.acviteList) {
							// if (this.time <= this.acviteList[i].endtime * 1000) {
							// 	//进行中
							// 	this.acviteList[i].status = 1;
							// } else if (this.time > this.acviteList[i].endtime * 1000) {
							// 	//已结束
							// 	this.acviteList[i].status = 0;
							// }
							let ii = {
								id: this.acviteList[i].id,
								age: this.acviteList[i].age,
								avatar: this.acviteList[i].avatar,
								nickname: this.acviteList[i].nickname,
								gender: this.acviteList[i].gender,
								habitation: "",
								heightdata: "",
								height: this.acviteList[i].height,
								industry: "",
								materialstatus: "",
								username: this.acviteList[i].username,
							}
							this.verifiedList[i] = ii
						}
						// this.verifiedList = [...res.data.userList];
						console.log('精选会员数据', this.verifiedList)
						// this.appointList = [...res.data.engament]
					}
				} catch (err) {
					this.$request.error(err, this)
				}
			},
			//点击轮播图
			// toBanner(e) {
			// 	console.log(e);
			// 	uni.navigateTo({
			// 		url: 'dateDetail'
			// 	})
			// },
			//前往活动详情页
			doSign(e) {
				// console.log(e);
				// if (!this.token) {
				// 	uni.showModal({
				// 		title: '您还未登录',
				// 		content: '点击登录,登录后可查看更多!',
				// 		showCancel: true,
				// 		confirmText: '登录',
				// 		success: (res) => {
				// 			// console.log(res);
				// 			if (res.confirm) {
				// 				uni.navigateTo({
				// 					url: "/pages/index/wxLogin"
				// 				})
				// 			} else if (res.cancel) {
				// 				console.log('用户点击取消');
				// 			}

				// 		}
				// 	});
				// 	return false;
				// }
				uni.navigateTo({
					url: '/pages/activities/activitiesDetail?id=' + e.id + '&status=' + e.status
				})
			},
			//前往个人详情
			toPersonal(e) {
				// console.log(e);
				// if (!this.token) {
				// 	uni.showModal({
				// 		title: '您还未登录',
				// 		content: '点击登录,登录后可查看更多!',
				// 		showCancel: true,
				// 		confirmText: '登录',
				// 		success: (res) => {
				// 			// console.log(res);
				// 			if (res.confirm) {
				// 				uni.navigateTo({
				// 					url: "/pages/index/wxLogin"
				// 				})
				// 			} else if (res.cancel) {
				// 				console.log('用户点击取消');
				// 			}

				// 		}
				// 	});
				// 	return false;
				// }
				if (e.gender == 1) {
					//男
					uni.navigateTo({
						url: '/pages/recommend/personal?type=0&id=' + e.id
					})
				} else {
					//女
					uni.navigateTo({
						url: '/pages/recommend/personal?type=1&id=' + e.id
					})
				}
			},
			//前往更多
			toMore(e) {
				if (!this.token) {
					// uni.showModal({
					// 	title: '您还未登录',
					// 	content: '点击登录,登录后可查看更多!',
					// 	showCancel: true,
					// 	confirmText: '登录',
					// 	success: (res) => {
					// 		// console.log(res);
					// 		if (res.confirm) {
					// 			uni.navigateTo({
					// 				url: "/pages/index/wxLogin"
					// 			})
					// 		} else if (res.cancel) {
					// 			console.log('用户点击取消');
					// 		}

					// 	}
					// });
					// return false;
				}
				switch (e) {
					case 1:
						//活动更多
						uni.switchTab({
							url: '/pages/activities/activities'
						});
						break;
					case 2:
						//认证会员更多
						uni.switchTab({
							url: '/pages/recommend/recommend'
						})
						break;
					case 3:
						//约会圈子
						uni.navigateTo({
							url: '/pages/index/dateCircle'
						});
						break;
				}
			},
			//前往约会详情
			toDetail(e) {
				// if (!this.token) {
				// 	uni.showModal({
				// 		title: '您还未登录',
				// 		content: '点击登录,登录后可查看更多!',
				// 		showCancel: true,
				// 		confirmText: '登录',
				// 		success: (res) => {
				// 			// console.log(res);
				// 			if (res.confirm) {
				// 				uni.navigateTo({
				// 					url: "/pages/index/wxLogin"
				// 				})
				// 			} else if (res.cancel) {
				// 				console.log('用户点击取消');
				// 			}

				// 		}
				// 	});
				// 	return false;
				// }
				uni.navigateTo({
					url: "dateDetail?id=" + e.id
				})
			},
			//点击返回顶部
			toTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 600,
				});
			},
			//选择性别
			chooseGender(e) {
				const arr = [...this.search.genderArr];
				//先循环整个数组解除已选
				for (let i in arr) {
					if (arr[i].selected) {
						arr[i].selected = false;
					}
				}
				//再设置选项
				this.search.genderArr[e].selected = true;
				//添加进检索对象
				this.searchInfo.gender = this.allList.gender[e].gender;
			},
			//选择年龄
			chooseAge(e) {
				const arr = [...this.search.ageArr];
				//先循环整个数组解除已选
				for (let i in arr) {
					if (arr[i].selected) {
						arr[i].selected = false;
					}
				}
				//再设置选项
				this.search.ageArr[e].selected = true;
				//添加进检索对象
				this.searchInfo.age = this.search.ageArr[e].age;
			},
			//选择地区
			chooseArea(e) {
				const arr = [...this.search.areaArr];
				//先循环整个数组解除已选
				for (let i in arr) {
					if (arr[i].selected) {
						arr[i].selected = false;
					}
				}
				//再设置选项
				this.search.areaArr[e].selected = true;
				//添加进检索对象
				this.searchInfo.area = this.allList.area[e].id;
			},
			//选择收入
			chooseIn(e) {
				const arr = [...this.search.incomeArr];
				//先循环整个数组解除已选
				for (let i in arr) {
					if (arr[i].selected) {
						arr[i].selected = false;
					}
				}
				//再设置选项
				this.search.incomeArr[e].selected = true;
				//添加进检索对象
				this.searchInfo.income = this.allList.income[e].id;
			},
			//执行检索
			doResult() {

				console.log(this.searchInfo);
				//防止用户直接点击按钮
				if (this.searchInfo.gender == '' && this.searchInfo.age == '' && this.searchInfo.area == '' && this.searchInfo.income ==
					'') {
					uni.showToast({
						title: '请先选择检索条件!',
						icon: 'none'
					})
					return false;
				}

				//先关闭蒙层
				this.close();

				if (this.searchInfo.gender || this.searchInfo.age || this.searchInfo.area || this.searchInfo.income) {
					//同步设置保存本地
					uni.setStorageSync('search', this.searchInfo);
					//跳转到推荐
					uni.switchTab({
						url: '/pages/recommend/recommend',
					})
				}
			},
			//重置检索
			reset() {
				//防止用户直接点击按钮
				if (this.searchInfo.gender == '' && this.searchInfo.age == '' && this.searchInfo.area == '' && this.searchInfo.income ==
					'') {
					uni.showToast({
						title: '请先选择检索条件!',
						icon: 'none'
					})
					return false;
				}

				//先循环整个数组解除已选
				for (let i in this.search.genderArr) {
					if (this.search.genderArr[i].selected) {
						this.search.genderArr[i].selected = false;
					}
				}

				for (let j in this.search.ageArr) {
					if (this.search.ageArr[j].selected) {
						this.search.ageArr[j].selected = false;
					}
				}

				for (let k in this.search.areaArr) {
					if (this.search.areaArr[k].selected) {
						this.search.areaArr[k].selected = false;
					}
				}

				for (let t in this.search.incomeArr) {
					if (this.search.incomeArr[t].selected) {
						this.search.incomeArr[t].selected = false;
					}
				}

				//设置检索对象为空
				this.searchInfo.gender = '';
				this.searchInfo.age = '';
				this.searchInfo.area = '';
				this.searchInfo.income = '';
			},
			//切换蒙层
			change() {
				// if (!this.token) {
				// 	uni.showModal({
				// 		title: '您还未登录',
				// 		content: '点击登录,登录后可查看更多!',
				// 		showCancel: true,
				// 		confirmText: '登录',
				// 		success: (res) => {
				// 			// console.log(res);
				// 			if (res.confirm) {
				// 				uni.navigateTo({
				// 					url: "/pages/index/wxLogin"
				// 				})
				// 			} else if (res.cancel) {
				// 				console.log('用户点击取消');
				// 			}

				// 		}
				// 	});
				// 	return false;
				// }
				this.serviseShow = true;
				this.maskShow = true;
			},
			//直接关闭了蒙层
			close() {
				this.serviseShow = false;
				setTimeout(() => {
					this.maskShow = false;
				}, 450)
			},
			//转换时间戳
			doreset(e) {
				//转换时间戳
				if ((e + '').length != 13) {
					var date = new Date(e * 1000); //如果date为13位不需要乘1000
					var Y = date.getFullYear() + '-';
					var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
					var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
				} else {
					var date = new Date(e); //如果date为13位不需要乘1000
					var Y = date.getFullYear() + '-';
					var M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
					var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
				}
				return Y + M + D;
			},
			//重置数组
			init() {

				//性别数组
				for (let i in this.allList.gender) {
					if (this.allList.gender[i].name) {
						let obj = {};
						obj.gender = this.allList.gender[i].name;
						obj.selected = false;
						this.search.genderArr.push(obj);
					}
				}

				//居住地
				for (let i in this.allList.area) {
					if (this.allList.area[i].shortname) {
						let obj = {};
						obj.area = this.allList.area[i].shortname;
						obj.selected = false;
						this.search.areaArr.push(obj)
					}
				}

				//月收入数组
				for (let i in this.allList.income) {
					if (this.allList.income[i].income) {
						let obj = {};
						obj.income = this.allList.income[i].income;
						obj.selected = false;
						this.search.incomeArr.push(obj)
					}
				}

			},
			//位置切割
			doStr(e) {
				let arr = e.split('-');
				return arr[0]
			}
		}
	}
</script>

<style lang="scss">
	@import 'index.scss';
</style>
